<template>
	<view class="body" v-if="show">
		<view class="refund" v-if="orderList.length > 0">
			<view class="r-item" v-for="(item,index) in orderList" :key="index" @click="toDetail(item.id)">
				<!-- 商品详情 -->
				<view class="goods">
					<view class="item">
						<view class="img">
							<image :src="item.goods.spec.spec_image==''? item.goods.image : item.goods.sku_image"
								mode="scaleToFill"></image>
						</view>
						<view class="content">
							<view class="top">
								<view class="title">{{ item.goods.goods_name }}</view>
							</view>
							<view class="center">
								<view class="type">
									<view>
										{{ item.goods.goods_attr ? item.goods.goods_attr :'' }}
									</view>
								</view>
								<view class="num">x{{ item.goods.total_num }}</view>
							</view>
							<view class="bottom">
								<view class="tags">
								</view>
								<view class="price"> <text>￥</text> {{ item.goods.goods_price }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 退款状态 -->
				<view class="refund-type">
					<view class="type">{{item.log[item.log.length - 1].operate_content}}</view>
				</view>
				<!-- 按钮 -->
				<view class="btn">
					<button v-if="item.refund_status == 5 || item.refund_status == 1 ||item.refund_status == 2"
						@click.stop="delClick(item,index)">删除记录</button>
					<button v-else-if="item.refund_status == 0" @click.stop="cancelClick(item,index)">取消退款</button>
					<button v-else-if="item.refund_status == 3"
						@click.stop="toggle('center',item.id,index,'fill')">填写物流</button>
					<button class="black">查看详情</button>
				</view>
				<!-- 状态文字标签 -->
				<view class="status_text" :class="{'red':item.refund_type_text == '退货'}">
					<text>{{item.refund_type_text}}</text>
				</view>
			</view>

			<view class="fill">
				<uni-popup ref="popup">
					<view class="popup-content">
						<view class="title">填写物流信息</view>
						<view class="cont">
							<view class="p-item">
								<view class="text">物流公司:</view>
								<input type="text" v-model="company" placeholder="请输入物流公司"
									placeholder-style="color:#999999;font-size:24rpx">
							</view>
							<view class="p-item">
								<view class="text">物流单号:</view>
								<input type="text" v-model="number" placeholder="请输入物流单号"
									placeholder-style="color:#999999;font-size:24rpx">
							</view>
						</view>
						<view class="btn">
							<button @click="cancel()">取消</button>
							<button @click="confirm()">确定</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="empty" v-if="show">
			<view class="">
				<image src="../../../../static/icon/mall_order.png" mode=""></image>
			</view>
			<view class="empty-text">
				您还没有退款售后订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [], //所有列表
				btnType: '', //按钮类型
				id: 0, //当前点击订单的售后id
				index: 0, //当前点击订单的索引值
				content: '', //确认弹窗的提示内容
				type: '', //填写物流弹窗的type：center
				company: '', //填写物流的物流公司
				number: '', //填写物流的物流单号
				page: 1,
				pageSize: 10,
				last_page: 1,
				show: false
			}
		},
		onLoad() {
			this.getOrderList()
		},
		onReachBottom() {
			// 已经是最后一页
			if (this.page >= this.last_page) {
				return false;
			}
			this.page++
			this.getOrderList()
		},
		methods: {
			getOrderList() {
				let _this = this
				_this.$api.get('mall.refund/index', {
					page: _this.page,
					page_size: _this.pageSize
				}).then(res => {
					if (res.code == 1) {
						_this.show = true
						let list = _this.orderList.concat(res.data.data)
						_this.orderList = list
						_this.last_page = res.data.last_page
					} else {
						_this.toast(res.msg)
					}
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/user/mall/refund/detail?id=' + id
				})
			},
			delClick(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定删除记录吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.refund/del', {
								id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.orderList

									list.splice(index, 1)

									_this.orderList = list
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			cancelClick(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定取消退款吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.refund/cancel', {
								id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.orderList

									list[index].refund_status = 1
									list[index].log.push({
										operate_content: '取消申请'
									})

									_this.orderList = list
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toggle(type, id, index, btnType) {
				this.type = type
				this.btnType = btnType //按钮类型
				this.id = id //当前id
				this.index = index //当前索引
				this.$refs.popup.open(type)
			},
			cancel() {
				this.company = ''
				this.number = ''
				this.$refs.popup.close()
			},
			confirm() {
				let _this = this
				if (_this.company == '') {
					_this.toast('请填写物流公司')
					return false
				}
				if (_this.number == '') {
					_this.toast('请填写物流单号')
					return false
				}
				_this.$api.post('mall.refund/delivery', {
					id: _this.id,
					express_company: _this.company,
					express_no: _this.number
				}).then(res => {
					if (res.code == 1) {
						_this.toast('填写成功')
						// 改变状态
						_this.orderList[_this.index].refund_status = 4
						_this.orderList[_this.index].log.push({
							operate_content: '寄回商品'
						})

						this.company = ''
						this.number = ''
						_this.$refs.popup.close()
					} else {
						_this.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 40rpx;
	}

	.body {
		padding: 0 24rpx;
	}

	.empty {
		margin-top: 40%;
	}

	/* 退款详情 */
	.r-item {
		// width: calc(100vw - 112rpx);
		padding: 40rpx 32rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 2rpx 50rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 24rpx;
		margin-top: 32rpx;
		position: relative;
		overflow: hidden;
	}

	/* 商品详情 */
	.item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f9f6f6;
	}

	.item:first-of-type {
		padding-top: 0;
	}

	.item:last-of-type {
		border-bottom: none;
	}

	.item .img {
		width: 150rpx;
		height: 150rpx;
	}

	.item .img image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.item .content {
		width: calc(100vw - 286rpx);
	}

	.item .content .bottom,
	.item .content .center {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.item .top .title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.item .bottom .price {
		font-size: 24rpx;
	}

	.item .bottom .price text {
		font-size: 20rpx;
	}

	.item .content .center {
		font-size: 20rpx;
		color: #999999;
		margin-bottom: 21rpx;
	}

	.item .content .bottom .tags text {
		font-size: 20rpx;
		color: #000000;
		padding: 0 8rpx;
		border: 1rpx solid #000000;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}

	/* 退款信息 */
	.refund-type {
		width: calc(100vw - 188rpx);
		padding: 25rpx 38rpx 24rpx 38rpx;
		background: #FAFAFA;
		border-radius: 16rpx;
		border: 1rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.refund-type .text {
		margin-left: 24rpx;
		font-size: 24rpx;
		color: #999999;
	}

	/* 按钮 */
	.btn {
		width: calc(100vw - 112rpx);
		display: flex;
		justify-content: flex-end;
		margin-top: 40rpx;
	}

	.btn button {
		font-weight: 800;
		font-size: 24rpx;
		color: #000000;
		background-color: #FFFFFF;
		margin: 0 0 0 20rpx;
		border-radius: 100rpx;
		opacity: 1;
		border: 1rpx solid #999999;
	}

	.btn button::after {
		border: none;
	}

	.btn .black {
		color: #FFFFFF;
		background-color: #000000;
		border: 0;
	}

	/* 状态文字标签 */
	.status_text {
		width: 150rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		background: #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		transform: rotate(45deg);
		position: absolute;
		top: 25rpx;
		right: -32rpx;
	}

	.red {
		background-color: #FF6512;
	}

	/* 弹窗 */
	.fill .popup-content {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		width: calc(100vw - 120rpx);
		overflow: hidden;
	}

	.fill .popup-content .title {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
		padding: 36rpx 0;
		border-bottom: 1rpx solid #DBDBDB;
	}

	.fill .popup-content .cont {
		width: calc(100vw - 200rpx);
		padding: 45rpx 40rpx;
		border-bottom: 1rpx solid #EDEDED;
	}

	.popup-content .cont .p-item {
		height: 64rpx;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-content .cont .p-item .text {
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 12rpx;
	}

	.popup-content .cont .p-item:last-of-type {
		margin: 0;
	}

	.popup-content input {
		width: 70%;
		font-size: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #DBDBDB;
		padding: 15rpx 0 15rpx 20rpx;
	}

	.popup-content .btn {
		display: flex;
		margin: 0;
		justify-content: space-between;
	}

	.popup-content .btn button {
		width: 50%;
		height: 88rpx;
		line-height: 88rpx;
		margin: 0;
		border: none;
		font-size: 26rpx;
		font-weight: bold;
		opacity: 1;
		border-radius: 0rpx 0rpx 0rpx 24rpx;
	}

	.popup-content .btn button:last-of-type {
		color: #FFFFFF;
		background-color: #000000;
		border-radius: 0rpx 0rpx 24rpx 0rpx;
	}

	.popup-content .btn button::before {
		border: none;
	}

	.empty {
		width: 100%;
		text-align: center;
		margin-top: 20%;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999999;
			margin-top: 80rpx;
		}
	}
</style>